Ensure Web page accessibility



The U.S. Congress amended the Rehabilitation Act in 1998 to include Section 508, which requires federal agencies to make their electronic and information technology accessible to people with disabilities. Section 508 was added to procure accessibility to information technologies and to encourage development of new technologies with accessibility in mind. For Web developers, this means following the guidelines set forth by the W3C's Web Accessibility Initiative (WAI).

The guidelines detail information on how content developers should ensure accessibility to Web pages. This includes a list of checkpoints that developers should use to validate the accessibility of their designs. The checkpoint list is divided into priorities:

• Priority 1: A Web developer must satisfy this checkpoint or accessibility requirements will not be met.
• Priority 2: A Web developer should satisfy this checkpoint or accessibility requirements may not be met.
• Priority 3: A Web developer may satisfy this checkpoint or it is possible that accessibility will be difficult.

You can find the complete list of checkpoints here.

In basic terms, most accessibility-enabled applications won't have any difficulty reading HTML that requires a beginning and ending tag. Also, any images or other tags can be defined through the HTML 4.0 TITLE attribute.

For intrinsic controls, such as an INPUT of type radio or check box, you can use the LABEL element to associate text with another element.

<INPUT TYPE="radio" VALUE="1" ID="opt1"><LABEL FOR="opt1">This is the first

option.</LABEL>

For any areas that require a mouse click, you should try to use the A element. If you wish to capture the mouse click in script and do an action based on some other conditions, you can either set the HREF attribute on the A element to "#" or, in Internet Explorer, you can set the returnValue property on the window.event object to "false" in the event handler.

Client-side image maps are preferred over server-side image maps because the user can tab to each area selection. To make it even easier, set <A>s around each of the selection areas so the user only has to hit [ENTER] to activate the image area.

In Internet Explorer, if you set the TABINDEX attribute to something other than 0, you can make it so the element can receive focus. This will further enable accessibility.

Here's an example of a simple page that doesn't follow the accessibility guidelines:

. . .

<B>Please choose your animal:</B><BR>

<INPUT TYPE="radio" NAME="optAnimal">Bear<BR>

<INPUT TYPE="radio" NAME="optAnimal">Goat<BR>

<INPUT TYPE="radio" NAME="optAnimal">Cat<BR>

<INPUT TYPE="radio" NAME="optAnimal">Dog<BR>

. . .

The idea is that the user has the ability to choose one of the four animals listed. In order to make this page accessible, it needs a method to differentiate between the four choices. Here's the example in an accessible form:

. . .

<B>Please choose your animal:</B><BR>

<INPUT TYPE="radio" NAME="optAnimal" ID="opt1"><LABEL

 FOR="opt1">Bear</LABEL><BR>

<INPUT TYPE="radio" NAME="optAnimal" ID="opt2"><LABEL

 FOR="opt2">Goat</LABEL><BR>

<INPUT TYPE="radio" NAME="optAnimal" ID="opt3"><LABEL

 FOR="opt3">Cat</LABEL><BR>

<INPUT TYPE="radio" NAME="optAnimal" ID="opt4"><LABEL

FOR="opt4">Dog</LABEL><BR>

. . .

This provides a distinct label for each choice. Notice the following:

• The ID attribute has been added to the INPUT elements.
• The IDs have different values.
• The LABEL element distinctly provides a definition for each INPUT through the FOR attribute on the LABEL.

Another often overlooked problem can be the text between the A elements. A simple "click here" will not provide the user with a decent description of where the link leads them. Also, if you provide a hyperlink for a complete sentence, you may be confusing the user.

It's best to keep the text brief and to the point. For instance, place anchor tags (<A>) around "Index" instead of "click here to access the index" or "click here" in "click here to access the index".

Check out the Web Development Forum for links for more detailed information about accessibility.

Phillip Perkins is a contractor with Ajilon Consulting. His experience ranges from machine control and client/server to corporate intranet applications.